import React from 'react'
import { Button, Tag  } from 'antd-mobile'
import './index.less'
// ========================================
/**
 *  <RoomType title="房型选择" />
 * */
// ========================================
class RoomType extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            isShow: 'none',
            tags: ['一室', '二室', '三室', '四室', '五室', '五室以上'],
            tagSelected: [false, false, false, false, false]
        };
    }
    componentWillReceiveProps (nextProps) {
        this.setState({
            isShow: nextProps.isShow
        });
    }
    clearFun = () => {
        this.setState({
            isShow: 'none',
            tagSelected: [false, false, false, false, false]
        });
    };
    render() {
        let that = this;
        let tags = this.state.tags;
        // let tagSelected = this.state.tagSelected;
        let bodyHeight = window.screen.height;
        return (
            <div id="roomType" style={{display: this.state.isShow, height: bodyHeight + 'px'}}>
                <div className="roomType-content">
                    <div className="roomType-title">{this.props.title}</div>
                    <div className="roomType-tags">
                        {
                            tags.map((val, index) => {
                                return (
                                    <Tag className="roomType-tag" data-seed={index} key={index}
                                         selected={that.state.tagSelected[index]}>
                                        {val}
                                    </Tag>
                                )
                            })
                        }
                    </div>
                    <div className="roomType-footer">
                        <Button type="ghost" className="roomType-btn" onClick={this.clearFun}>不限条件</Button>
                        <Button type="primary" className="roomType-btn" onClick={this.clearFun}>确定</Button>
                    </div>
                </div>
                <div className="roomType-shadow"></div>
            </div>
        );
    }
}
// ========================================
export default RoomType;